<template>
  <div class="side" router>
    <router-link class="item" to="/shop-list">
      <div @mouseover="over(1)" @mouseout="out(1)">
        <img :src="imgUrl1" alt="">
        <span class="side_t">门店列表</span>
      </div>
    </router-link>
    <router-link class="item" to="/medical-team">
      <div @mouseover="over(2)" @mouseout="out(2)">
        <img :src="imgUrl2" alt="" >
        <span class="side_t">医疗团队</span>
      </div>
    </router-link>
    <router-link class="item" to="/petclass">
      <div @mouseover="over(3)" @mouseout="out(3)">
        <img :src="imgUrl3" alt="" >
        <span class="side_t">宠物课堂</span>
      </div>
    </router-link>

<!--    <div @mouseover="over(2)" @mouseout="out(2)">-->
<!--      <div>-->
<!--        <img :src="imgUrl2" alt="">-->
<!--        <span class="side_t">医疗团队</span>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div @mouseover="over(3)" @mouseout="out(3)">-->
<!--      <div>-->
<!--        <img :src="imgUrl3" alt="">-->
<!--        <span class="side_t">宠物课堂</span>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl1: "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544696977.png",
      imgUrl2: "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544694850.png",
      imgUrl3: "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544698174.png"
    }
  },
  methods: {
    over(type) {
      switch (type) {
        case 1:
          this.imgUrl1 = "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544700326.png"
          break;
        case 2:
          this.imgUrl2 = "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544695975.png"
          break;
        case 3:
          this.imgUrl3 = "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544695654.png"
          break;
      }
    },
    out(type) {
      switch (type) {
        case 1:
          this.imgUrl1 = "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544696977.png"
          break;
        case 2:
          this.imgUrl2 = "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544694850.png"
          break;
        case 3:
          this.imgUrl3 = "http://www.meilianzhonghe.com.cn/uploads/image/20181213/1544698174.png"
          break;
      }
    }
  }
}
</script>

<style scoped>
.side{
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.side a {
  color: #009eb6;
  font-size: 12px;
  text-decoration: none;
}
.side>.item{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 114px;
  height: 114px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin-top: 10px;
}
.side>.item>div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 105px;
  height: 105px;
  border-radius: 50%;
}
.side>.item>div:hover{
  color: white;
  background-color: rgba(0, 158, 182, 0.5);
}
.side img{
  margin-bottom: 20px;
}
</style>